<script lang="ts" setup>
import type { Projects } from '@/common/types/projects'
import { useLayoutInfo } from '@/common/composables/useLayoutInfo'
import { NavigateItem, PageTitle } from '@/common/constants'
import { getRandomActivityService } from '@/common/service/activity'
import { getRandomProjectService } from '@/common/service/projects'
import type { Activity } from '@/common/types/activity'
import skeleton from '@/common/skeleton/pages/index.vue'

const { contentAreaHeight, tabBarHeight } = useLayoutInfo()
/**
 * 轮播统一配置
 */
const SwiperConfig = {
  /** 是否采用衔接滑动，即播放到末尾后重新回到开头 */
  circular: true,
  /** 是否显示面板指示点  */
  indicatorDots: false,
  /** 是否自动切换 */
  autoplay: true,
  /** 自动切换时间间隔 */
  interval: 2000,
  /** 滑动动画时长 */
  duration: 500,
}

/** navigateList */
const navigateList = [
  NavigateItem.CALENDAR,
  NavigateItem.MY_ACTIVITY,
  NavigateItem.MY_PROJECT,
  NavigateItem.NOTIFICATION,
]

/**
 * 随机项目数据
 */
const project = ref<Projects>()
/**
 * 随机活动数据
 */
const activity = ref<Activity[]>()

const text = ['项目', '活动']

/**
 * 随机获取一个项目
 */
const getRandomProject = async () => {
  const { data } = await getRandomProjectService()
  project.value = data
}

/**
 * 随机获取五个活动
 */
const getRandomActivity = async () => {
  const { data } = await getRandomActivityService()
  activity.value = data
  console.log('data:', data)
}

onLoad(() => {
  Promise.all([getRandomProject(), getRandomActivity()])
  console.log('onLoad')
})

const isLoading = ref(false)

onShow(async () => {
  isLoading.value = true
  await Promise.all([getRandomProject(), getRandomActivity()])
  isLoading.value = false
  console.log('onShow')
})
</script>

<template>
  <hope-nav-bar :title="PageTitle.HOME" />
  <scroll-view
    scroll-y class="scroll-view" :style="{
      height: `${contentAreaHeight - tabBarHeight}px`,
    }"
  >
    <view class="search-bar">
      <!-- 搜索栏组件 -->
      <hope-search-bar />
    </view>
    <!-- 推荐搜索 -->
    <hope-search-text :text="text" />
    <view class="navigate-list">
      <view
        v-for="navigate in navigateList" :key="navigate.icon" class="navigate-list-item"
        @click="() => navigate.onClick()"
      >
        <hope-navigate-item :navigate-item="navigate" />
      </view>
    </view>
    <view class="recommend">
      <template v-if="project && activity">
        <uni-section title="推荐项目" type="line" title-font-size="17px" />
        <!-- 公益项目组件 -->
        <hope-projects v-if="project" :project="project" class="recommend-projects" />
        <uni-section title="推荐活动" type="line" title-font-size="17px" />
        <!-- 轮播图形式展示志愿者活动 -->
        <swiper
          class="recommend-activity-swiper" :circular="SwiperConfig.circular"
          :indicator-dots="SwiperConfig.indicatorDots" :autoplay="SwiperConfig.autoplay"
          :interval="SwiperConfig.interval" :duration="SwiperConfig.duration"
        >
          <swiper-item v-for="item in activity" :key="item.id" class="recommend-activity-swiper-item">
            <!-- 志愿者活动组件 -->
            <hope-activity :activity="item" button-size="sm" />
          </swiper-item>
        </swiper>
      </template>
      <template v-else>
        <skeleton />
      </template>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
.search-bar {
  padding-inline: 30rpx
}

.navigate-list {
  display: flex;
  margin-top: 36rpx;
  justify-content: space-around;
  padding-inline: $padding-base;

}

.recommend {
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: $color-white;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;

  &-activity-swiper {
    margin-top: 20rpx;
    height: 300rpx;

    &-item {
      display: block;
    }
  }

  &-projects {
    margin-bottom: 20rpx;
  }
}

:deep(.uni-section .uni-section-header) {
  padding: 0;
}
</style>
